<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
        }

        ul li {
            width: 23%;
            margin: 1%;
            border: 1px solid #000;
            box-sizing: border-box;
            text-align: center;
        }

        img {
            width: 100%;
            height: 200px;
            background-color: #f00;
        }
    </style>

</head>

<body>

    <ul id="list">
        <!-- <li>
                <img src="" alt="">
                <h3>标题</h3>
                <p>详细描述</p>
                <strong>价格</strong>
        </li> -->
    </ul>

    <script src="../js/lazyload.js"></script>

    <script>

        // 1 页面显示一组数据   12

        // 2 滚动 
        //    判断到达底部  --- 快要到达底部  开始请求下一波数据

        // 3 数据都拿到了  


        // 确认每次显示多少条数据    20

        // 滚动的时候  
        //    滚动一次：20-40    滚动2次：40-60   滚动3次：60-80   ...     
        //    分析 (count) * 20  (count+1) * 20

        //    数据加载完毕   总页数   data.length / 20  
        
        const data = [
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
            {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },

             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
             {
                goods_id : 001 ,
                goods_src :  '',
                goods_title : '1111',
                goods_des : '1111111' ,
                goods_price : '99'
            },
        ]


        const arr = [] ;
        data.forEach(item => {
            const obj = {
                goodsId : item.goods_id,
                goodsImg : item.goods_src,
                goodsTitle : item.goods_title ,
                goodsDes : item.goods_des ,
                goodsPrice : item.goods_price
            }
            arr.push(obj) ;
        })



        
        const oUl = document.querySelector('ul');
        console.log(oUl);

        const l = new LazyLoad(oUl , 3 , 20 , function() {
            alert('没有数据了')
        })


    </script>

</body>

</html>